<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Amaze UI Admin index Examples</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" href="assets/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <link rel="stylesheet" href="assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="assets/css/amazeui.datatables.min.css" />
    <link rel="stylesheet" href="assets/css/app.css">
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/theme.js"></script>

    <style type="text/css">
    .active{
        background-color:#dddddd;
        color:red; 
    }
    </style>
</head>

<body data-type="index">
    
        
        <div class="am-topbar am-topbar-inverse am-topbar-fixed-bottom am-form-group" style="background-color:rgba(255,255,255,0);border-color:#dddddd;height:50px;">

	        	<div class="am-u-sm-3 active" style="height:50px;border-radius:10px;">
                    <a href="user_c1.html" style="display:block;color:#929292;line-height:50px;" target="centerFrame"><b style="margin-left:30%;">社区</b></a>
                </div>
                <div class="am-u-sm-3" style="height:50px;border-radius:10px;">
                    <a href="user_c2.html" style="display:block;color:#929292;line-height:50px;" target="centerFrame"><b style="margin-left:30%;">学习</b></a>
                </div>
	        	<div class="am-u-sm-3" style="height:50px;border-radius:10px;">
                    <a href="user_c3.html" style="display:block;color:#929292;line-height:50px;" target="centerFrame"><b style="margin-left:30%;">我的</b></a>
                </div>
	        	<div class="am-u-sm-3" style="height:50px;border-radius:10px;">
                    <a href="user_c4.html" style="display:block;color:#929292;line-height:50px;" target="centerFrame"><b style="margin-left:30%;">预留</b></a>
                </div>
	     
        </div>	        

    </div>
    <script src="assets/js/amazeui.min.js"></script>
    <script src="assets/js/amazeui.datatables.min.js"></script>
    <script src="assets/js/dataTables.responsive.min.js"></script>
    <script>
    $(document).ready(function(e){

        $(".am-u-sm-3").on("click",function(){
            $(".am-u-sm-3").attr("class","am-u-sm-3");
            $(this).attr("class","am-u-sm-3 active");
            // $(this).find("a").attr("style","display:block;color:red;line-height:50px;");
        });
    });
    </script>

</body>

</html>
